<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>体育馆管理系统</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css"/>
		<link rel="stylesheet" type="text/css" href="css/css.css"/>
		<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<!--导航条开始-->
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand" href="#"><img src="img/logo.png" alt="logo"/></a>
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
						<!--<span class="sr-only">切换导航</span>-->
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse" id="navbar-collapse">
					<ul class="nav navbar-nav navbar-left">
						<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
						<li><a href="views/equipment.html">器材模块</a></li>
						<li><a href="views/place.html">场地模块</a></li>
						<li><a href="views/game.html">赛事模块</a></li>
						<li><a href="views/personal.html">个人中心</a></li>						
					</ul>
					<p id="firstP" class="navbar-text navbar-right"><a id="registerA" class="navbar-link" data-toggle="modal" href="#register">注册</a></p>
					<p class="navbar-text navbar-right"><a id="checkInA" class="navbar-link" data-toggle="modal" href="#login">登录</a></p>
				</div>
			</div>
		</nav>
		<!--导航条结束-->
		
		<!--轮播图开始-->
		<div id="mycarousel" class="carousel slide">
			<ol class="carousel-indicators">
				<li data-target = "#mycarousel" data-slide-to = "0" class="active"></li>
				<li data-target = "#mycarousel" data-slide-to = "1"></li>
				<li data-target = "#mycarousel" data-slide-to = "2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active item-style1">
					<a href="#"><img src="img/first.jpg" alt="第一张"/></a>
				</div>
				<div class="item item-style2">
					<a href="#"><img src="img/second.jpg" alt="第二张"/></a>
				</div>
				<div  class="item item-style3">
					<a href="#"><img src="img/third.jpg" alt="第三张"/></a>
				</div>
			</div>
			<a href="#mycarousel" data-slide = "prev" class="carousel-control left">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>
			<a href="#mycarousel" data-slide = "next" class="carousel-control right">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>
		<!--轮播图结束-->
		
		
		
		<!--内容一开始-->
		<div class="tab1">
			<div class="container">
				<h2 class="tab1-h2">广海体育馆公告</h2>
				<div class="row">
					<div class="col-md-6 col">
						<div class="media">
							<div class="media-left">
								<a href="#"><img src="img/tab2.png" class="media-object" alt="tab1第一张图片"/></a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">比赛结果</h4>
								<p class="text-muted">在NBA近来公布的最佳阵容中，沃尔入选最佳阵容三阵，这让他符合了新劳资协议中指定老将特例的条件，可以和奇才提前续约。</p>
							</div>
						</div>
					</div>
					<div class="col-md-6 col">
						<div class="media">
							<div class="media-left">
								<a href="#"><img src="img/tab2.png" class="media-object" alt="tab1第一张图片"/></a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">比赛结果</h4>
								<p class="text-muted">在NBA近来公布的最佳阵容中，沃尔入选最佳阵容三阵，这让他符合了新劳资协议中指定老将特例的条件，可以和奇才提前续约。</p>
							</div>
						</div>
					</div>
					<div class="col-md-6 col">
						<div class="media">
							<div class="media-left">
								<a href="#"><img src="img/tab2.png" class="media-object" alt="tab1第一张图片"/></a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">比赛结果</h4>
								<p class="text-muted">在NBA近来公布的最佳阵容中，沃尔入选最佳阵容三阵，这让他符合了新劳资协议中指定老将特例的条件，可以和奇才提前续约。</p>
							</div>
						</div>
					</div>
					<div class="col-md-6 col">
						<div class="media">
							<div class="media-left">
								<a href="#"><img src="img/tab2.png" class="media-object" alt="tab1第一张图片"/></a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">比赛结果</h4>
								<p class="text-muted">在NBA近来公布的最佳阵容中，沃尔入选最佳阵容三阵，这让他符合了新劳资协议中指定老将特例的条件，可以和奇才提前续约。</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--内容一结束-->
		
		<!--底部footer开始-->
		<footer id="footer" class="text-muted bottom">
			<div class="container">
				<p>管理系统 | 合作联系</p>
				<p>503工作室.体育光管理系统。Powered by Bootstrap</p>
			</div>
		</footer>
		<!--底部footer结束-->
		
		<!--登录模态框开始-->
		<div class="modal fade" id="login" tabindex="-1"  >
        	<div class="modal-dialog" >
        		<div class="modal-content">
        			<div class="modal-header">
        				<button type="button" class="close" data-dismiss="modal">
        					<span>&times;</span>
        				</button>
        				<h4 class="modal-title">会员登录</h4>
        			</div>
        			<div class="modal-body">
        				<form method="post" class="form-group" id="login-modal">
        					<div class="form-group">
								<label for="account">账号:</label>
								<input type="text" name="account" class="form-control" id="account" placeholder="请输入账号" />
							</div>
							<div class="form-group">
								<label for="password">密码:</label>
								<input type="password" name="password" class="form-control" id="password" placeholder="请输入密码" />
							</div>
							<!--  
							<div class="row">
								<div class="col-md-9">
									
								</div>
								<div class="col-md-3">
									<button id="login-btn" type="submit" class="btn btn-primary">登录</button>
        							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>								</div>
								</div>
							-->
        				</form>
        			</div>
        			<div class="modal-footer">
				        <button id="login-btn" type="submit" class="btn btn-primary">登录</button>
				        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				     </div>
        		</div>
        	</div>
       </div>
		<!--登录模态框结束-->
		<!-- 登录界面jQuery代码开始 -->
		<script type="text/javascript">
			$(function(){
				$("#login-btn").click(function(){
					$.ajax({
						url:"login",
						type:"POST",
						data:$("#login form").serialize(),
						success:function(result){
							if(result.resultParm.code == "100"){
								console.log(result);
								alert(result.resultInfo);
								$("#registerA").remove();
								$("#checkInA").remove();
								$("#firstP").append($("<a></a>").append(result.resultParm.user.username).attr("href","views/personal.html"));
								$("#login").modal("hide");
								
							} else {
								console.log(result);
								alert(result.resultInfo);

							}
						}
					});
				})
			})
		</script>
		<!-- 登录界面jQuery代码结束 -->
		
		<!--注册模态框结束-->
		<div class="modal" id="register" tabindex="-1">
        	<div class="modal-dialog">
        		<div class="modal-content">
        			<div class="modal-header">
        				<button type="button" class="close" data-dismiss="modal">
        					<span>&times;</span>
        				</button>
        				<h4 class="modal-title">会员注册</h4>
        			</div>
        			<div class="modal-body">
        				<form method="post" class="form-group" id="register-modal">
        					<div class="form-group">
								<label for="username">请输入用户名:</label>
								<input type="text" name="username" class="form-control" id="username" placeholder="请输入注册用户名" />
							</div>
							<div class="form-group">
								<label for="account">请输入账号:</label>
								<input type="text" name="account" class="form-control" id="regist_account" placeholder="请输入注册账号" />
							</div>
							<div class="form-group">
								<label for="password">请输入密码:</label>
								<input type="password" name="password" class="form-control" id="password" placeholder="请输入密码" />
							</div>
							<div class="form-group">
								<label for="repassword">再次输入密码:</label>
								<input type="password" name="repassword" class="form-control" id="repassword" placeholder="请重新输入密码" />
							</div>
        				</form>
        			</div>
        			<div class="modal-footer">
				        <button id="register-btn" type="submit" class="btn btn-primary">注册</button>
        				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>		
				    </div>
				  </div>
				</div>
		</div>
		<!-- 注册界面jQuery代码开始 -->		    
		<script type="text/javascript">
			$(function(){
				$("#regist_account").change(function(){
					var $account = this.value;
					$.ajax({
						url:"checkAccount",
						data:"account="+$account,
						type:"POST",
						success:function(result){
							alert(result.resultInfo);
							console.log(result.resultParm.code);
						}
					})
				});
				
				$("#register-btn").click(function(){
					$.ajax({
						url:"regist",
						data:$("#register form").serialize(),
						type:"POST",
						success:function(result){
							alert(result.resultInfo);
							console.log(result);
							$("#register").modal("hide");
						}
						
					});
					
				});
			})
		
		</script>
		<!-- 注册界面jQuery代码结束 -->
		
		<!--注册模态框结束-->
		
		
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrapValidator.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
		
		
	</body>
</html>
